<template>
  <view class="_dict-type-box" @touchmove.stop>
    <view class="head">
      <button class="btn btn-text btn-cancel" @click="onCancel">取消</button>
      <view class="bd">{{ title }}</view>
      <button class="btn btn-text btn-confirm" @click="onConfirm">确定</button>
    </view>
    <scroll-view scroll-y class="_dict-type" :style="wrapStyle">
      <view class="search-box" v-if="search">
        <input
          type="text"
          v-model="name"
          :placeholder="placeholder"
          class="input"
        />
      </view>
      <checkbox-group>
        <view
          class="item"
          v-for="(item, index) in showDataList"
          :key="index"
          @click="onChecked(item, index)"
        >
          <view class="bd">{{ item.label }}</view>
          <diy-checkbox :checked="item.checked"> </diy-checkbox>
          <!-- <checkbox :value="item.value" class="checkbox" /> -->
        </view>
      </checkbox-group>

      <view class="tips" v-if="!showDataList.length"> 暂无相关数据 </view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import diyCheckbox from "@/components/public/checkbox/checkbox";
export default {
  mixins: [],
  components: {
    diyCheckbox,
  },
  props: {
    type: {
      default: "",
    },
    multiple: {
      default: false,
    },
    value: {
      default: "",
    },
    wrapStyle: {
      default: "",
    },
    search: {
      default: false,
    },
    title: {
      default: "请选择",
    },
    placeholder: {
      default: "请输入",
    },
    list: {
      default: null,
    },
  },
  computed: {
    showDataList() {
      let arr = this.list || this.dataList;
      return arr.filter((i) => {
        return i.label.indexOf(this.name.trim()) !== -1;
      });
    },
  },
  data() {
    return {
      mixinViewOptions: {
        getURL: "/applet/individualCore/getDictionarByType",
        type: "post",
        isPage: true,
        isShowLoading: true,
        pullDown: true,
        createdIsNeed: false,
      },
      name: "",
      dataList: [],
      dataForm: {
        type: "",
        limit: 999,
        page: 1,
      },
    };
  },
  methods: {
    ...mapMutations(["setPageObject"]),
    fetchComplete(err, data = []) {
      return data.map((i) => {
        i.checked = i.value == this.value;
        return {
          label: i.content || "",
          value: i.id,
        };
      });
    },
    onChecked(item, index) {
      if (this.list) {
      } else {
        this.dataList.forEach((i) => (i.checked = false));
        item.checked = true;
        this.dataList.splice(index, 1, item);
      }

      this.$emit("checked", item, index);
    },
    onCancel() {
      this.$emit("cancel");
    },
    onConfirm() {
      this.$emit("confirm");
    },
  },
  created() {
    this.dataForm.type = this.type;
    // this.getDataList();
  },
};
</script>

<style lang="stylus" scoped>
._dict-type-box {
  max-height: 480rpx;

  .head {
    position: fiexd;
    z-index: 5;
    display: flex;
    left: 0;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background: #fff;
    border-bottom: 1rpx solid #eee;
    font-size: 28rpx;

    >.btn {
      flex: 0 0 auto;
      padding: 0 24rpx;
      font-size: 28rpx;
      color: #3F7DFF;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
      line-height: 90rpx;

      &.btn-cancel {
        color: #999;
      }

      &.btn-confirm {
        color: #3F7DFF;
      }
    }

    >.bd {
      flex: 1;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      padding: 0 10rpx;
      box-sizing: border-box;
    }
  }
}

._dict-type {
  position: relative;
  overflow: auto;
  background: #fff;
  max-height: 390rpx;
  min-height: 190rpx;

  .item {
    position: relative;
    display: flex;
    // padding: 20rpx 160rpx;
    padding: 20rpx 130rpx;
    border-bottom: 2rpx solid #eee;
    font-size: 28rpx;
    line-height: 48rpx;
    no-wrap();

    >.bd {
      flex: 1;
      padding-right: 20rpx;
      padding-left: 20rpx;
    }
  }
}

.search-box {
  position: relative;
  padding: 20rpx;

  >.input {
    display: block;
    line-height: 68rpx;
    height: 72rpx;
    border: 2rpx solid #eee;
    padding: 0 16rpx;
  }
}
</style>